<template>
    <div class = "column">
         <el-container>
            <el-container>
            <el-main>
                <div class = "title-wrapper">
                    <p>栏目管理</p>
                </div>
                <div class = "newly-wrapeer">
                    <el-button @click = 'newly' type="primary">新增</el-button>
                </div>
                <template>
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    fixed
                    prop="date"
                    label="名称"
                    align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="页面"
                    width="180"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="province"
                    label="创建日期"
                    width="180"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="city"
                    label="修改日期"
                    width="180"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="操作"
                    width="180"
                    align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                </template>
                <el-dialog
                title="新增栏目"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
                <span>这是一段信息</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
                </el-dialog>
            </el-main>
            </el-container>
         </el-container>
    </div>
</template>
<script>
export default {
    data(){
        return{
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }],
        dialogVisible: false
        }
    },
    methods: {
        newly(){
            this.dialogVisible = true
        },
         handleClick(row) {
        console.log(row);
      }
    },
}
</script>
<style scoped>
    .column{
        width:100%
    }
    .column .newly-wrapeer{
        padding:15px 0;
    }
</style>
